<template>
  <div class="DataStatistics">
    <div class="panel-col" v-for="(item, index) in amount" :key="item.name">
      <img class="back_img" :src="item.back_img" />
      <img class="back_icon" :src="item.icon" />

      <div class="card-body">
        <div style="z-index: 11; position: relative; flex-wrap: wrap" class="flex justify-between">
          <span class="name fff">
            {{ item.name
            }}<a-tooltip>
              <icon-question-circle class="svgtooltip fff" />
              <template #content>
                <div v-if="Array.isArray(item.tooltip)">
                  <div v-for="(tip, i) in item.tooltip" :key="i"> {{ i + 1 }}、{{ tip }} </div>
                </div>
                <div v-else>
                  {{ item.tooltip + '：' + item.count + '辆' }}
                </div>
              </template>
            </a-tooltip>
          </span>
          <div v-if="index > 0" style="flex-shrink: 0">
            <span>
              <span class="rate_label fff">同比</span>
              <span class="fff rate_value">
                <span v-if="item.lastYearRate">
                  <icon-arrow-up v-if="item.lastYearRate > 0" class="mr4 fff" />
                  <icon-arrow-down v-else-if="item.lastYearRate < 0" class="mr4 fff" />
                </span>
                <span>{{ renderunit(item.lastYearRate) }}</span>
              </span>
            </span>
            <span class="ml23">
              <span class="rate_label fff">环比</span>
              <span class="fff rate_value">
                <span v-if="item.lastCycleRate">
                  <icon-arrow-up v-if="item.lastCycleRate > 0" class="mr4 fff" />
                  <icon-arrow-down v-else-if="item.lastCycleRate < 0" class="mr4 fff" />
                </span>
                <span>{{ renderunit(item.lastCycleRate) }}</span>
              </span>
            </span>
          </div>
        </div>
        <div class="money fff">{{ formatNumber(item.totalAmount, true) }}<span class="unit ml8 fff">元</span></div>
        <div class="settlement" v-if="index > 0">
          <div>
            <span>已结算：</span>
            <span> {{ formatNumber(item.totalSettlementAmount) }}元 </span>
          </div>
          <div style="margin-top: 4px">
            <span>待结算：</span>
            <span> {{ formatNumber(item.totalWaitSettlementAmount) }}元 </span>
          </div>
        </div>

        <div v-else>
          <span class="count">
            <span>车辆数：</span>
            <span>
              <span>{{ item.count || 0 }}辆</span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="carmodal">
  import { ref, watch } from 'vue'
  import { formatNumber } from '@/utils/index'
  import icon1 from '@/assets/revenue/dataicon1.png'
  import icon2 from '@/assets/revenue/dataicon2.png'
  import icon3 from '@/assets/revenue/dataicon3.png'
  import icon4 from '@/assets/revenue/dataicon4.png'
  import back_img1 from '@/assets/databoard/data1.png'
  import back_img2 from '@/assets/databoard/data2.png'
  import back_img3 from '@/assets/databoard/data3.png'
  import back_img4 from '@/assets/databoard/data4.png'
  const amount = ref([
    {
      name: '总资产',
      tooltip: [
        '总资产：车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
        '车辆数：运营状态为空闲可租、租赁中、运维中、已借出且来源为自有、借调（借入）、挂靠/托管、融资租赁的车辆数之和',
        '此处展示当前最新车辆数及资产总额，不受时间筛选影响',
      ],
      icon: icon1,
      back_img: back_img1,
    },
    {
      name: '总收入',
      tooltip: ['总收入：短租订单、违章代办费、借调（借出）、车辆处置费之和', '取符合筛选条件的短租订单下包含的所有费项'],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon2,
      back_img: back_img2,
    },
    {
      name: '总支出',
      tooltip: [
        '总支出：为车辆购置费、购置额外费用（购置税/过户费/运输费/保证金/手续费）、运维费用（维修/保养/年检/违章的代办真实成本）、运营成本、车辆借入之和',
        '车辆购置费及购置额外费用属于公司整体支出，不属于某个门店，只有角色为管理员的用户登录时，选择全部门店时才可查看',
      ],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon3,
      back_img: back_img3,
    },
    {
      name: '总收益',
      tooltip: [
        '总收益=总收入-总支出',
        '当您角色为管理员时，选择全部门店后总收益中包含车辆购置费及购置额外费用，非管理员选择全部门店则不展示',
        '筛选单个门店后，总收益中不包含车辆购置费及购置额外费用',
      ],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon4,
      back_img: back_img4,
    },
  ])
  const renderunit = (data) => {
    if (data) {
      return data < 0 ? data * -1 + '%' : data + '%'
    } else {
      return '0%'
    }
  }
  const props = defineProps({
    briefReportlistamount: Object,
  })
  watch(
    () => props.briefReportlistamount,
    () => {
      const { car, totalRevenue, totalExpenditure, totalProfit } = props.briefReportlistamount
      amount.value.forEach((item, index) => {
        if (index === 0) {
          return Object.assign(item, car)
        } else if (index === 1) {
          return Object.assign(item, totalRevenue)
        } else if (index === 2) {
          return Object.assign(item, totalExpenditure)
        } else {
          return Object.assign(item, totalProfit)
        }
      })
    },
    { immediate: true, deep: true }
  )
</script>

<style lang="less" scoped>
  .ml8 {
    margin-left: 8px;
  }
  .ml23 {
    margin-left: 23px;
  }
  .mr4 {
    margin: 0 4px;
  }
  .mt6 {
    margin-top: 6px;
  }
  .svgtooltip {
    margin-left: 4px;
  }
  .fff {
    color: #fff;
  }
  .name {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
  }
  .settlement {
    line-height: 24px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
  }
  .rate_label {
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
  }
  .rate_value {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
  }
  .money {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    word-break: keep-all;
  }
  .unit {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
  .count {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 2px;
  }
  .back_icon {
    width: 111px;
    height: 107px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
  }
  .back_img {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: calc(123.5%);
  }
  .DataStatistics {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  .card-body {
    position: relative;
    z-index: 10;
    padding-left: 20px;
    padding: 14px 20px;
  }

  .panel-col {
    width: calc(25% - 18px);
    min-width: 270px;
    // height: 157px;
    position: relative;
  }

  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
</style>
